<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例">
    </meta>
    <title>热力图-播放</title>
    <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        input {
            width: 350px;
        }

        .checkbox {
            display: inline-block;
            cursor: pointer;
        }

        .play {
            width: 20px;
            height: 16px;
        }

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 38px;
            padding: 0 10px;
            line-height: 38px;
            border-radius: 100px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
            margin-bottom: 4px;
        }

        .defultbtn:hover {
            background-color: #b3daf8;
        }

        .btnon {
            background-color: #1E9FFF;
            color: #fff;
            border: 1px solid #1E9FFF;
        }

        .colorbox {
            width: 50px;
        }

        .inputbox {
            background-color: white;
            font-size: 12px;
            border: 1px solid #dcdee2;
            border-radius: 6px;
            margin-bottom: 18px;
            padding: 6px 1px 1px 6px;
            text-align: left;
            font-size: 0;
            margin-bottom: 0;
            width: 346px;
        }

        .input {
            font-size: 14px;
            border: none;
            box-shadow: none;
            outline: none;
            background-color: transparent;
            padding: 0;
            margin: 0;
            width: auto !important;
            max-width: inherit;
            min-width: 80px;
            vertical-align: top;
            height: 30px;
            color: #34495e;
            margin: 2px;
            line-height: 30px;
        }

        .arrbox {
            border-radius: 6px;
            margin-bottom: 10px;
            padding: 6px 1px 1px 6px;
            text-align: left;
            font-size: 0;
        }

        .spanbox {
            line-height: 30px;
            margin: 2px;
            padding: 0 10px;
            background-color: #1abc9c;
            color: white;
            border-radius: 4px;
            font-size: 13px;
            cursor: pointer;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            overflow: hidden;
            transition: 0.25s linear;
        }

        .spanbox:hover {
            padding: 0px 17px 0 3px;
        }

        .spanclose {
            color: white;
            padding: 0 10px 0 0;
            cursor: pointer;
            font-size: 12px;
            position: absolute;
            right: -3px;
            text-align: right;
            text-decoration: none;
            top: 0;
            width: 100%;
            bottom: 0;
            z-index: 2;
            opacity: 0;
            filter: "alpha(opacity=0)";
            transition: opacity 0.25s linear;
            font-style: normal;
        }

        .spanbox:hover .spanclose {
            padding: 0 10px 5px 0;
            opacity: 1;
            -webkit-filter: none;
            filter: none;
        }

        .spanclose:after {
            content: "x";
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            line-height: 27px;
        }
    </style>
</head>

<body>
    <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
        <earth-comp></earth-comp>
    </div>

    <script>
        // 1 创建Earth的vue组件
        var EarthComp = {
            template: `
                <div style="width: 100%; height: 100%"  @click="raise = false,reduce = false">
                    <div ref="earthContainer" style="width: 100%; height: 100%">
                    </div>
                    <div class="box" style="position: absolute; left: 18px; top: 18px; color: white; background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 25px;min-width:200px; font-size:24px; font-family: 宋体;">
                        <div class="defultbtn" :class="{'btnon':playing}" @click="playing = !playing">热力图播放</div><br/>
                        <span @click="loopPlay = !loopPlay" class="checkbox"><input class="play" type="checkbox" v-model="loopPlay">循环播放</span><br/>
                        <span>持续时间: {{ timeDuration }}s</span><br/><input type="range" min="0" step="0.1" max="5" v-model.number="timeDuration"><br/>
                        <span>当前时间：</span><br/><input type="range" min="0" step="0.01" max="1" v-model.number="currentTime"><br/>
                        <span style="display: inline-block; margin-bottom: 3px;">图片地址：</span><br/>
                        <div class="inputbox">
                            <div class="arrbox">
                                <div style="width: 300px;" v-for="(item,index) in labelarr" :key="index" class="spanbox">
                                    <span>{{item}}</span>
                                    <i class="spanclose" @click="removeitem(index,item)"></i>
                                </div>
                                <input
                                    placeholder="输入后回车"
                                    v-model="currentval"
                                    @keyup.enter="addlabel"
                                    class="input"
                                    type="text"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            `,
            data() {
                return {
                    _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
                    playing: true,
                    loopPlay: true,
                    timeDuration: 0,
                    currentTime: 0,
                    imageUrls: [],
                    labelarr: [],
                    currentval: '',
                };
            },
            // 1.1 资源创建
            mounted() {
                // 1.1.1 创建地球
                var earth = new XE.Earth(this.$refs.earthContainer);

                // 1.1.2 场景配置
                earth.sceneTree.root = {
                    "title": "当前场景",
                    "isSelected": true,
                    "children": [{
                        "czmObject": {
                            "xbsjType": "Imagery",
                            "enabled": true,
                            "name": "谷歌影像",
                            "show": true,
                            "xbsjImageryProvider": {
                                "XbsjImageryProvider": {
                                    "url": "//www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}",
                                }
                            }
                        }
                    },
                    {
                        "czmObject": {
                            "name": '大雁塔',
                            "xbsjType": "Tileset",
                            "url": '../assets/dayanta/tileset.json',
                            "xbsjPosition": [
                                1.9016974701882112,
                                0.5972325152147303,
                                58.352576160356152
                            ],
                            "xbsjUseOriginTransform": false,
                            "skipLevelOfDetail": false
                        },
                        "ref": 'tileset'
                    }, {
                        "ref": 'heatMap1',
                        "czmObject": {
                            "xbsjType": "HeatMap",
                            "position": [
                                1.9017007449558452,
                                0.5972456941664638,
                                63.031468750219
                            ],
                            "playing": true
                        }
                    }
                    ]
                };

                var tileset = earth.sceneTree.$refs.tileset.czmObject;
                var heatMap1 = earth.sceneTree.$refs.heatMap1.czmObject;

                // 设置相机位置
                // earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
                earth.camera.position = [1.901698836771133, 0.5971822607273302, 501.17684409661535];
                earth.camera.rotation = [0.03593315314102252, -0.7634808012756493, 0.00015558788214686814];

                // 设置初始值
                this.labelarr = ["./images/baidu.png", "./images/logo.png", "./images/sougou.jpg"];
                heatMap1.imageUrls = ["./images/baidu.png", "./images/logo.png", "./images/sougou.jpg"];

                // 1.1.5 数据绑定
                this._playingUnbind = XE.MVVM.bind(this, 'playing', heatMap1, 'playing');
                this._loopPlayUnbind = XE.MVVM.bind(this, 'loopPlay', heatMap1, 'loopPlay');
                this._timeDurationUnbind = XE.MVVM.bind(this, 'timeDuration', heatMap1, 'timeDuration');
                this._currentTimeUnbind = XE.MVVM.bind(this, 'currentTime', heatMap1, 'currentTime');

                this._earth = earth;

                // only for Debug
                window.tileset = tileset;
                window.heatMap1 = heatMap1;
                window.earth = earth;
            },
            methods: {
                // 移除标签
                removeitem(index, item) {
                    this.labelarr.splice(index, 1);
                    heatMap1.imageUrls = this.labelarr;
                },
                // input回车加入labelarr中
                addlabel() {
                    this.labelarr.push(this.currentval);
                    this.currentval = ''
                    if (this.labelarr.length > 0) {
                        this.imageUrls = [];
                        for (let i = 0; i < this.labelarr.length; i++) {
                            if (this.labelarr[i] !== "") {
                                this.imageUrls.push(this.labelarr[i]);
                            } else {
                                return;
                            }
                        }
                    }
                    heatMap1.imageUrls = this.imageUrls;
                }
            },
            // 1.2 资源销毁
            beforeDestroy() {
                // vue程序销毁时，需要清理相关资源
                this._playingUnbind = this._playingUnbind && this._playingUnbind();
                this._loopPlayUnbind = this._loopPlayUnbind && this._loopPlayUnbind();
                this._timeDurationUnbind = this._timeDurationUnbind && this._timeDurationUnbind();
                this._currentTimeUnbind = this._currentTimeUnbind && this._currentTimeUnbind();
                this._earth = this._earth && this._earth.destroy();
            },
        }

        // 2 创建vue程序
        // XE.ready()用来加载Cesium.js等相关资源
        XE.ready().then(() => {
            var app = new Vue({
                el: '#vueApp',
                components: {
                    EarthComp,
                },
            });
        });
    </script>
</body>

</html>